<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>SnapShotControl: Using with Directions</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript"></script>
    <script type="text/javascript"> 
    document.write('<script type="text/javascript" src="../src/snapshotcontrol'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');

    var map;

    function initialize () {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(42.356015,-71.109085), 14);

      //add control
      var ctrlOpt = {};
      ctrlOpt.buttonLabelHtml = "<img src=\"image/camera.png\" width=\"25\" height=\"20\">";
      ctrlOpt.usePolylineEncode = true;
      map.addControl(new SnapShotControl(ctrlOpt));

      doDirection();
    }

    function doDirection () {
      var directionsPanel = document.getElementById("route");
      directionsPanel.innerHTML = "";
      map.clearOverlays();
      
      var fromElement = document.getElementById("fromAddress");
      var toElement = document.getElementById("toAddress");
      
      var directions = new GDirections(map, directionsPanel);
      directions.load("from: " + fromElement.value + ", to: ," + toElement.value);
    }
    </script> 
  </head> 
 
  <body onload="initialize()" onunload="GUnload();"> 
    <div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div> 
    <div id="route" style="width: 25%; height:480px; float:right; border; 1px solid black;"></div> 
    <br clear="all" />
    <table>
    <tr>
      <td>From:</td>
      <td><input type="text" id="fromAddress" size="40" value="500 Memorial Drive, Cambridge" /></td>
    </tr>
    <tr>
      <td>To:</td>
      <td><input type="text" id="toAddress" size="40" value="Boston, MA 02215 (Fenway Park)" /></td>
    </tr>
    <tr>
      <td><input type="button" onclick="doDirection();" value="Direction" /></td>
    </tr>
    </table>
  </body> 
</html> 


